/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-02-25 17:35:26
 * @LastEditTime: 2021-02-26 21:21:02
 * @LastEditors: Zhang Zhaoda
 */
import {FC,useEffect,useRef} from 'react';
//引入样式
import color from "../css/color.module.scss"
//引入滑动
import BScroll from "better-scroll"

//引入数据类型验证
import {KeyInter} from "@/store/reducers/color.reducer";
import {Colors} from "@/interface/color.inter"
interface Iprops{
  jumpBack:(ColorId: string)=>void,
  changeIndex:(index:number)=>void,
  colorData:KeyInter,
  carIndex:number,
  colorKey:string
}

let ColorComponent:FC<Iprops>=function (props){
  //ref
  let bs = useRef<HTMLDivElement>(null)
  useEffect(() => {
   
    //横向滑动
    new BScroll(bs.current as HTMLDivElement, {
      scrollX: true,
      click: true
    })
  }, [])
  let {jumpBack,colorData,carIndex,changeIndex,colorKey}=props
  
  return <div>
    <p
      className={color.allcolor}
      onClick={() => { jumpBack('') }}
    >全部颜色</p>
    {/* tab切换 */}
    <div className={color.colortypes} ref={bs}>
      <div>
        {
           colorData !==[]&&Object.keys(colorData).map((item, index) => {
            return <span
              key={index}
              className={carIndex === index ? color.active : ''}
              onClick={() => { changeIndex(index) }}
            >
              {item}
            </span>
          })
        }
      </div>
    </div>
    <div className={color.colors}>
      {
        colorData !==[] && colorKey !== '' && colorData[colorKey].length&&colorData[colorKey].map((item: Colors) => {
          return <span
            key={item.ColorId}
            onClick={() => { jumpBack(item.ColorId as string) }}
          >
            <span style={{ backgroundColor: item.Value }}></span>
            <span>
              {item.Name}
            </span>
          </span>
        })
      }

    </div>
  </div>
}

export default ColorComponent